<template>
  <div class="shopLis">
    <div class="shopLis__item" to="" :key="item._id">
      <img :src="item.imgUrl" alt="" class="shopLis__item__img" />
      <div
        :class="{
          'shopLis__item__con': true,
          'shopLis__item__con--bordered': hideBorder ? false : true,
        }"
      >
        <h3 class="shopLis__item__con__name">
          {{ item.name }}
        </h3>
        <p class="shopLis__item__con__tags">
          <span class="shopLis__item__con__tags__tag"
            >月售{{ item.sales }}+</span
          >
          <span class="shopLis__item__con__tags__tag"
            >起送￥{{ item.expressLimit }}</span
          >
          <span class="shopLis__item__con__tags__tag"
            >基本运费￥{{ item.expressPrice }}</span
          >
        </p>
        <p class="shopLis__item__con__activity">
          {{ item.slogan }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShopInfo",
  props: [ 'item', 'hideBorder' ],
};
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";
.shopLis {
  display: flex;
  flex-direction: column;
  &__item {
    display: flex;
    margin-bottom: 0.12rem;
    &__img {
      width: 16.52%;
      height: 16.52%;
      vertical-align: middle;
    }
    &__con {
      flex: 1;
      margin-left: 0.16rem;
      padding-bottom: 0.12rem;
      &--bordered {
        border-bottom: 0.01rem solid $content-gbcolor;
      }
      &__name {
        font-size: 0.16rem;
        color: $content-fontcolor;
        line-height: 0.22rem;
      }
      &__tags {
        font-size: 0.13rem;
        color: $content-fontcolor;
        line-height: 0.18rem;
        margin: 0.08rem 0;
        &__tag {
          margin-right: 0.16rem;
        }
        &__tag:last-child {
          margin-right: 0;
        }
      }
      &__activity {
        font-size: 0.13rem;
        color: #e93b3b;
        line-height: 0.18rem;
      }
    }
  }
}
</style>